{% extends 'dashboards/base_dashboard.html' %}
{% load custom_filters %}

{% block extra_css %}
<style>
    .stat-card {
        border: none;
        border-radius: 10px;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
        transition: all 0.3s ease;
        height: 100%;
    }
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 2rem 0 rgba(58, 59, 69, 0.2);
    }
    .stat-card .card-body {
        padding: 1.5rem;
    }
    .stat-card .card-title {
        font-size: 0.9rem;
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 0.5rem;
    }
    .stat-card .card-value {
        font-size: 1.75rem;
        font-weight: 700;
        color: #2e59d9;
        margin-bottom: 0.5rem;
    }
    .stat-card.primary .card-value { color: #4e73df; }
    .stat-card.success .card-value { color: #1cc88a; }
    .stat-card.warning .card-value { color: #f6c23e; }
    .stat-card.info .card-value { color: #36b9cc; }
    .stat-card i {
        font-size: 2rem;
        opacity: 0.2;
        position: absolute;
        right: 1.5rem;
        top: 1.5rem;
    }
    .progress {
        height: 8px;
        border-radius: 4px;
        margin: 1rem 0;
        background-color: #eaecf4;
    }
    .progress-bar {
        border-radius: 4px;
        transition: width 0.6s ease;
    }
    .task-priority {
        font-size: 0.75rem;
        font-weight: 600;
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
    }
    .priority-high { background-color: #f8d7da; color: #721c24; }
    .priority-medium { background-color: #fff3cd; color: #856404; }
    .priority-low { background-color: #e2e3e5; color: #383d41; }
</style>
{% endblock %}

{% block stats %}
<!-- Dashboard Header -->
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 text-gray-800">Welcome back, {{ request.user.get_full_name|default:request.user.username }}!</h1>
        <p class="text-muted">Here's what's happening in {{ ministry.name|default:'your ministry' }} today</p>
    </div>
    <div class="mt-3 mt-md-0">
        <div class="btn-group" role="group">
            <a href="{% url 'tasks:task-create' %}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>Create Task
            </a>
            {% if request.user.role.name == 'minister' %}
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-user-plus me-2"></i>Add User
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{% url 'users:user_create' %}?role=director">
                        <i class="fas fa-user-tie me-2"></i>Add Director General
                    </a></li>
                    <li><a class="dropdown-item" href="{% url 'users:user_create' %}?role=head">
                        <i class="fas fa-user-shield me-2"></i>Add Head of Section
                    </a></li>
                </ul>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div class="row mb-4">
    <!-- Total Tasks -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card primary h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="card-title mb-0">Total Tasks</h6>
                    <i class="fas fa-tasks text-primary"></i>
                </div>
                <h2 class="card-value mb-2">{{ total_tasks }}</h2>
                <div class="progress">
                    <div class="progress-bar bg-primary" role="progressbar" 
                         style="width: 100%" 
                         aria-valuenow="100" 
                         aria-valuemin="0" 
                         aria-valuemax="100">
                    </div>
                </div>
                <p class="text-muted small mt-2 mb-0">
                    <i class="fas fa-circle text-primary me-1"></i> 
                    {% widthratio completed_tasks total_tasks 100 %}% completed
                </p>
            </div>
        </div>
    </div>

    <!-- Completed Tasks -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card success h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="card-title mb-0">Completed</h6>
                    <i class="fas fa-check-circle text-success"></i>
                </div>
                <div class="d-flex align-items-baseline">
                    <h2 class="card-value mb-0">{{ completed_tasks }}</h2>
                    <span class="ms-2 text-success small">
                        <i class="fas fa-arrow-up"></i> {% widthratio completed_tasks total_tasks 100 %}%
                    </span>
                </div>
                <div class="progress mt-3">
                    <div class="progress-bar bg-success" role="progressbar" 
                         style="width: {% widthratio completed_tasks total_tasks 100 %}%" 
                         aria-valuenow="{{ completed_tasks }}" 
                         aria-valuemin="0" 
                         aria-valuemax="{{ total_tasks }}">
                    </div>
                </div>
                <p class="text-muted small mt-2 mb-0">
                    <i class="fas fa-calendar-week me-1"></i>
                    {{ in_progress_tasks }} in progress
                </p>
            </div>
        </div>
    </div>
    
    <!-- Pending Tasks -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card warning h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="card-title mb-0">In Progress</h6>
                    <i class="fas fa-clock text-warning"></i>
                </div>
                <div class="d-flex align-items-baseline">
                    <h2 class="card-value mb-0">{{ pending_tasks }}</h2>
                    <span class="ms-2 text-warning small">
                        <i class="fas fa-exclamation-circle"></i> {{ high_priority_tasks|length }} high
                    </span>
                </div>
                <div class="progress mt-3">
                    <div class="progress-bar bg-warning" role="progressbar" 
                         style="width: {% widthratio pending_tasks total_tasks 100 %}%" 
                         aria-valuenow="{{ pending_tasks }}" 
                         aria-valuemin="0" 
                         aria-valuemax="{{ total_tasks }}">
                        {% widthratio pending_tasks total_tasks 100 %}%
                    </div>
                </div>
                <p class="text-muted small mt-2 mb-0">
                    <i class="fas fa-tasks me-1"></i>
                    {{ pending_tasks }} tasks pending
                </p>
            </div>
        </div>
    </div>
    
    <!-- Active Departments -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card info h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="card-title mb-0">Departments</h6>
                    <i class="fas fa-building text-info"></i>
                </div>
                <div class="d-flex align-items-baseline">
                    <h2 class="card-value mb-0">{{ total_departments }}</h2>
                    <span class="ms-2 text-info small">
                        <i class="fas fa-building"></i> Total
                    </span>
                </div>
                <div class="progress mt-3">
                    <div class="progress-bar bg-info" role="progressbar" 
                         style="width: 100%" 
                         aria-valuenow="100" 
                         aria-valuemin="0" 
                         aria-valuemax="100">
                        100%
                    </div>
                </div>
                <p class="text-muted small mt-2 mb-0">
                    <i class="fas fa-layer-group me-1"></i>
                    {{ departments.count }} total departments
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block left_column %}
<!-- Recent Tasks -->
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">Recent Tasks in {{ ministry.name }}</h6>
        <a href="{% url 'tasks:task-list' %}" class="btn btn-sm btn-primary">View All</a>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover" width="100%" cellspacing="0">
                <thead class="table-light">
                    <tr>
                        <th>Title</th>
                        <th>Department</th>
                        <th>Assigned To</th>
                        <th>Priority</th>
                        <th>Status</th>
                        <th>Due Date</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for task in recent_tasks %}
                    <tr>
                        <td>
                            <a href="{% url 'tasks:task-detail' task.id %}" class="text-primary">
                                {{ task.title|truncatechars:30 }}
                            </a>
                        </td>
                        <td>{{ task.assigned_to.department.name|default:"-" }}</td>
                        <td>{{ task.assigned_to.get_full_name|default:task.assigned_to.email }}</td>
                        <td>
                            <span class="task-priority priority-{{ task.priority }}">
                                {{ task.get_priority_display }}
                            </span>
                        </td>
                        <td>
                            <span class="badge {% if task.status == 'completed' %}bg-success
                                           {% elif task.status == 'in_progress' %}bg-primary
                                           {% else %}bg-warning{% endif %}">
                                {{ task.get_status_display }}
                            </span>
                        </td>
                        <td>{{ task.due_date|date:"M d, Y"|default:"-" }}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'tasks:task-update' task.id %}" class="btn btn-sm btn-outline-primary" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a href="{% url 'tasks:task-delete' task.id %}" class="btn btn-sm btn-outline-danger" title="Delete">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center">No tasks found</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Director Generals Section -->
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">Director Generals</h6>
        <a href="{% url 'users:user_create' %}?role=director" class="btn btn-sm btn-primary">
            <i class="fas fa-plus me-1"></i> Add DG
        </a>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover" width="100%" cellspacing="0">
                <thead class="table-light">
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Department</th>
                        <th>Active Tasks</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for dg in director_generals %}
                    <tr>
                        <td>{{ dg.get_full_name|default:dg.username }}</td>
                        <td>{{ dg.email }}</td>
                        <td>{{ dg.department.name|default:"-" }}</td>
                        <td>{{ dg.assigned_tasks.count }} tasks</td>
                        <td>
                            <span class="badge {% if dg.is_active %}bg-success{% else %}bg-secondary{% endif %}">
                                {{ dg.is_active|yesno:"Active,Inactive" }}
                            </span>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'users:update' dg.id %}" class="btn btn-sm btn-outline-primary" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a href="{% url 'users:deactivate' dg.id %}" class="btn btn-sm btn-outline-warning" title="{{ dg.is_active|yesno:'Deactivate,Activate' }}">
                                    <i class="fas {% if dg.is_active %}fa-user-slash{% else %}fa-user-check{% endif %}"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center">No Director Generals found</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Departments Section -->
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
        <h6 class="m-0 font-weight-bold text-primary">Departments</h6>
        <a href="{% url 'departments:department_create' %}" class="btn btn-sm btn-primary">
            <i class="fas fa-plus me-1"></i> Add Department
        </a>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover" width="100%" cellspacing="0">
                <thead class="table-light">
                    <tr>
                        <th>Department</th>
                        <th>Director General</th>
                        <th>Members</th>
                        <th>Tasks</th>
                        <th>Completion</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for dept in department_stats %}
                    <tr>
                        <td>
                            <strong>{{ dept.name }}</strong>
                            <div class="text-muted small">{{ dept.description|default:''|truncatechars:40 }}</div>
                        </td>
                        <td>{{ dept.director_general.get_full_name|default:"-" }}</td>
                        <td>{{ dept.member_count|default:0 }}</td>
                        <td>
                            <div class="text-nowrap">
                                <span class="text-success">{{ dept.completed_tasks|default:0 }}</span> / 
                                <span class="text-primary">{{ dept.total_tasks|default:0 }}</span>
                            </div>
                            <div class="progress mt-1" style="height: 4px;">
                                <div class="progress-bar bg-success" role="progressbar" 
                                     style="width: {% widthratio dept.completed_tasks dept.total_tasks 100 %}%" 
                                     aria-valuenow="{% widthratio dept.completed_tasks dept.total_tasks 100 %}" 
                                     aria-valuemin="0" 
                                     aria-valuemax="100">
                                </div>
                            </div>
                        </td>
                        <td>{% widthratio dept.completed_tasks dept.total_tasks 100 %}%</td>
                        <td>
                            <span class="badge {% if dept.is_active %}bg-success{% else %}bg-secondary{% endif %}">
                                {{ dept.is_active|yesno:"Active,Inactive" }}
                            </span>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{% url 'departments:detail' dept.id %}" class="btn btn-sm btn-outline-primary" title="View">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{% url 'departments:update' dept.id %}" class="btn btn-sm btn-outline-secondary" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <a href="{% url 'departments:toggle-active' dept.id %}" class="btn btn-sm btn-outline-{% if dept.is_active %}warning{% else %}success{% endif %}" 
                                   title="{{ dept.is_active|yesno:'Deactivate,Activate' }}">
                                    <i class="fas {% if dept.is_active %}fa-toggle-off{% else %}fa-toggle-on{% endif %}"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center">No departments found</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Quick Stats Row -->
<div class="row">
    <!-- Task Status Distribution -->
    <div class="col-xl-6 col-lg-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Task Status Distribution</h6>
            </div>
            <div class="card-body">
                <div class="chart-pie pt-4 pb-2">
                    <canvas id="taskStatusChart"></canvas>
                </div>
                <div class="mt-4 text-center small">
                    <span class="mr-2">
                        <i class="fas fa-circle text-primary"></i> Pending
                    </span>
                    <span class="mr-2">
                        <i class="fas fa-circle text-success"></i> Completed
                    </span>
                    <span class="mr-2">
                        <i class="fas fa-circle text-info"></i> In Progress
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Department Performance -->
    <div class="col-xl-6 col-lg-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Department Performance</h6>
            </div>
            <div class="card-body">
                {% for dept in department_stats|slice:":5" %}
                <h4 class="small font-weight-bold">
                    {{ dept.name }} 
                    <span class="float-right">{% widthratio dept.completed_tasks dept.total_tasks 100 %}%</span>
                </h4>
                <div class="progress mb-4">
                    <div class="progress-bar bg-{{ forloop.counter|get_chart_color }}" 
                         role="progressbar" 
                         style="width: {% widthratio dept.completed_tasks dept.total_tasks 100 %}%" 
                         aria-valuenow="{% widthratio dept.completed_tasks dept.total_tasks 100 %}" 
                         aria-valuemin="0" 
                         aria-valuemax="100">
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    // Task Status Chart
    var ctx = document.getElementById("taskStatusChart");
    var taskStatusChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Pending", "Completed", "In Progress"],
            datasets: [{
                data: [{{ pending_tasks }}, {{ completed_tasks }}, {{ in_progress_tasks }}],
                backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
                hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
                hoverBorderColor: "rgba(234, 236, 244, 1)",
            }],
        },
        options: {
            maintainAspectRatio: false,
            tooltips: {
                backgroundColor: "rgb(255,255,255)",
                bodyFontColor: "#858796",
                borderColor: '#dddfeb',
                borderWidth: 1,
                xPadding: 15,
                yPadding: 15,
                displayColors: false,
                caretPadding: 10,
            },
            legend: {
                display: false
            },
            cutoutPercentage: 80,
        },
    });
</script>
{% endblock %}